import React, { useState, useEffect, useCallback } from 'react';
import { connect } from 'umi';
import PageHeaderWrapper from '@/components/PageHeaderWrapper/index';
import QuickEntry from '@/components/QuickEntry/QuickEntry';
import MainForm from '@/pages/MyRecruit/Offer/Detail/MainForm';
import StatusForm from '@/pages/MyRecruit/Offer/Detail/StatusForm';
import { withRoutePage } from '@/utils/enhanceUtils';
import PageRouter from '@/components/PageRouter/PageRouter';
import { fetchProcess } from '@/services/flowMine/waitApprovals';

import { getType } from '../utils';

const Detail = ({ dispatch, offerDetail, location, user, route }) => {
    const {
        query: { offerCode }
    } = location;
    const type = getType(route.path, 'detail');
    const { currentUser } = user;
    const { detail, sex } = offerDetail;
    const [visible, setVisible] = useState(false);
    const [statusVisible, setStatusVisible] = useState(false);
    const [activeKey, setActiveKey] = useState('1');
    const [approval, setApproval] = useState([]);
    const fetchDetail = useCallback(() => {
        dispatch({
            type: 'offerDetail/fetchDetail',
            payload: {
                offerCode,
                type
            },
            callback: async result => {
                const approvalResult = await fetchProcess(result.applicationNo);
                if (approvalResult.code !== 10000) return;
                setApproval(approvalResult.data);
            }
        });
    }, [offerCode]);
    const handleStatusChange = () => {
        setStatusVisible(false);
        fetchDetail();
    };

    useEffect(() => {
        fetchDetail();
        dispatch({
            type: 'offerDetail/fetchSex'
        });

        return () => {
            dispatch({
                type: 'offerDetail/reset'
            });
        };
    }, [fetchDetail]);
    return (
        <PageHeaderWrapper type="success">
            <PageRouter type="myrecruit" activePath="/personal/portal/recruit/offer">
                <MainForm
                    activeKey={activeKey}
                    setActiveKey={setActiveKey}
                    setStatusVisible={setStatusVisible}
                    setVisible={setVisible}
                    data={detail}
                    sex={sex}
                    currentUser={currentUser}
                    approval={approval}
                />
                {detail.candidateCode && (
                    <QuickEntry
                        candidateCode={detail.candidateCode}
                        visible={visible}
                        onOk={() => {
                            setVisible(false);
                            fetchDetail();
                        }}
                        onCancel={() => setVisible(false)}
                    />
                )}
                <StatusForm
                    candidateCode={detail.candidateCode}
                    offerId={detail.id}
                    offerState={detail.offerState}
                    title="设置offer状态"
                    visible={statusVisible}
                    onOk={handleStatusChange}
                    onCancel={() => setStatusVisible(false)}
                />
            </PageRouter>
        </PageHeaderWrapper>
    );
};

export default withRoutePage(
    connect(({ offerDetail, user }) => ({
        offerDetail,
        user
    }))(Detail)
);
